<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 是否是修改的判断
 *
 * @type {boolean}
 */
let isEdit = false

/**
 * 订单班列表
 * @type {*[]}
 */
let orderClassOptions = []

/**
 * 课程列表
 * @type {*[]}
 */
let courseOptions = []

/**
 * 教师列表
 * @type {*[]}
 */
let teacherOptions = []

/**
 * 教师列表
 * @type {*[]}
 */
let roomOptions = []

/**
 * 课程安排数据
 * @type {UnwrapNestedRefs<{total: number, form: {courseArrangeCourseName: string, courseArrangeRoomNo: string, courseArrangeWeeks: string, courseArrangeTeacherName: string, courseArrangeUpdateTime: string, courseArrangeOrderClassNo: string, courseArrangeCreateMan: string, courseArrangeClassHour: string, courseArrangeUpdateMan: string, courseArrangeRoomName: string, courseArrangeOrderClassName: string, courseArrangeCourseNo: string, courseArrangeStartTime: string, courseArrangeEndTime: string, courseArrangeCredit: string, courseArrangeWeekNumber: string, courseArrangeTeacherNo: string, courseArrangeSemester: string, courseArrangeCreateTime: string, courseArrangeNo: number, courseArrangeOrderClassState: number}, formVisible: boolean, orderClassName: string, pageSize: number, tableData: *[], pageNum: number}>}
 */
const courseArrangeData = reactive({
    orderClassName: '',
    tableData: [],
    total: 0,
    pageSize: 5,
    pageNum: 1,
    formVisible: false, // 是否显示弹窗
    form: {
        courseArrangeNo: 0,
        courseArrangeOrderClassNo: '',
        courseArrangeOrderClassName: '',
        courseArrangeOrderClassState: -1,
        courseArrangeCourseNo: '',
        courseArrangeCourseName: '',
        courseArrangeTeacherNo: '',
        courseArrangeTeacherName: '',
        courseArrangeWeekNumber: '',
        courseArrangeStartTime: '',
        courseArrangeEndTime: '',
        courseArrangeRoomNo: '',
        courseArrangeRoomName: '',
        courseArrangeClassHour: '',
        courseArrangeCredit: '',
        courseArrangeSemester: '',
        courseArrangeWeeks: '',
        courseArrangeCreateMan: '',
        courseArrangeCreateTime: '',
        courseArrangeUpdateMan: '',
        courseArrangeUpdateTime: '',
    }
})

/**
 * 加载课程安排
 */
const loadCourseArrange = () => {
    request.get(`/api/course-arrange/find-course-arrange-page/${account.accountNo}`, {
        params: {
            pageNum: courseArrangeData.pageNum,
            pageSize: courseArrangeData.pageSize,
            orderClassName: courseArrangeData.orderClassName
        }
    }).then(res => {
        courseArrangeData.tableData = res.data?.list || []
        courseArrangeData.form.courseArrangeStartTime =
            courseArrangeData.total = res.data?.list.map(item => item.courseArrangeCountNumber)[0] || 0;
    })
}
// 调用课程安排加载方法，获取后台数据
loadCourseArrange()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadCourseArrange()
}

/**
 * 重置
 */
const reset = () => {
    courseArrangeData.orderClassName = ''
    // 重置时，重新加载数据即可
    loadCourseArrange()
}

/**
 * 新增课程安排
 */
const addCourseArrange = () => {
    isEdit = false
    // 清空上次残留的数据
    courseArrangeData.form = {}
    courseArrangeData.formVisible = true
}

/**
 * 加载班级
 */
const loadOrderClass = () => {
    request.get(`/api/order-class/find-order-class-order-class-admin-no/${account.accountNo}`, {}).then(res => {
        orderClassOptions = res.data
    })
}
// 调用班级加载方法，获取后台数据
loadOrderClass()

/**
 * 加载课程
 */
const loadCourse = () => {
    request.get(`/api/course/find-course`, {}).then(res => {
        courseOptions = res.data
    })
}
// 调用课程加载方法，获取后台数据
loadCourse()

/**
 * 加载教师
 */
const loadTeacher = () => {
    request.get(`/api/teacher/find-teacher-order-class-admin-no`, {
        params: {
            orderClassAdminNo: account.accountNo
        }
    }).then(res => {
        teacherOptions = res.data
    })
}
// 调用教师加载方法，获取后台数据
loadTeacher()

/**
 * 加载教室
 */
const loadRoom = () => {
    request.get(`/api/room/find-room`, {}).then(res => {
        roomOptions = res.data
    })
}
// 调用教室加载方法，获取后台数据
loadRoom()

/**
 * 提交新增的课程安排
 */
const submitAddCourseArrange = () => {
    if (account.accountRoleName === 'visitor-order-class-admin') {
        ElMessage.info("游客-订单班管理员仅可以查看信息")
    } else {
        courseArrangeData.form.courseArrangeCreateMan = account.accountNo
        request.post(`/api/course-arrange/add-course-arrange`, courseArrangeData.form).then(res => {
            if (res.code === "200") {
                // 重新获取数据
                loadCourseArrange()
                // 关闭弹窗
                courseArrangeData.formVisible = false
                ElMessage.success("新增成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 修改课程安排
 *
 * @param row 按行修改
 */
const editCourseArrange = (row) => {
    isEdit = true
    courseArrangeData.form = JSON.parse(JSON.stringify(row))
    courseArrangeData.formVisible = true
}

/**
 * 提交修改的课程安排
 */
const submitEditCourseArrange = () => {
    if (account.accountRoleName === 'visitor-order-class-admin') {
        ElMessage.info("游客-订单班管理员仅可以查看信息")
    } else {
        courseArrangeData.form.courseArrangeUpdateMan = account.accountNo
        request.put(`/api/course-arrange/update-course-arrange`, courseArrangeData.form).then(res => {
            if (res.code === "200") {
                // 重新获取数据
                loadCourseArrange()
                // 关闭弹窗
                courseArrangeData.formVisible = false
                ElMessage.success("编辑成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 删除课程安排
 *
 * @param courseArrangeNo 主键
 */
const deleteCourseArrange = (courseArrangeNo) => {
    ElMessageBox.confirm("删除数据后无法恢复，您确认删除此条数据？", "删除确认", {type: 'warning'}).then(res => {
        if (account.accountRoleName === 'visitor-order-class-admin') {
            ElMessage.info("游客-订单班管理员仅可以查看信息")
        } else {
            request.delete(`/api/course-arrange/delete-course-arrange/${courseArrangeNo}`).then(res => {
                if (res.code === "200") {
                    // 重新获取数据
                    loadCourseArrange()
                    ElMessage.success("删除成功")
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "取消删除",
        })
    })
}
</script>

<template>
    <div v-if="account.accountRoleName === 'common-order-class-admin' || account.accountRoleName === 'visitor-order-class-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="courseArrangeData.orderClassName"
                      placeholder="请输入订单班名称查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadCourseArrange" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
        </div>
        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-button @click="addCourseArrange" type="primary" style="margin-bottom: 10px;">新增</el-button>
            </div>
            <div>
                <el-table :data="courseArrangeData.tableData" style="width: 100%">
                    <el-table-column prop="courseArrangeOrderClassNo" label="班号"/>
                    <el-table-column prop="courseArrangeOrderClassName" label="班名"/>
                    <el-table-column prop="courseArrangeCourseName" label="课程"/>
                    <el-table-column prop="courseArrangeTeacherName" label="教师" width="70px"/>
                    <el-table-column prop="courseArrangeRoomName" label="教室"/>
                    <el-table-column prop="courseArrangeWeekNumber" label="星期" width="70px"/>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="editCourseArrange(scope.row)" type="primary" size="small" plain>编辑
                            </el-button>
                            <el-button @click="deleteCourseArrange(scope.row.courseArrangeNo)" type="danger"
                                       size="small"
                                       plain>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="courseArrangeData.pageNum"
                           v-model:page-size="courseArrangeData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="courseArrangeData.total"/>
        </div>

        <el-dialog v-model="courseArrangeData.formVisible" :close-on-click-modal="false" title="课程安排信息">
            <el-form :model="courseArrangeData.form" label-width="100px" label-position="right"
                     style="padding-right: 30px;" v-if="isEdit === false">
                <div class="block" style="margin-bottom: 20px; margin-left: 45px">
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeOrderClassNo"
                            class="m-2"
                            placeholder="请选择班级"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in orderClassOptions"
                                :key="item.orderClassNo"
                                :label="item.orderClassName"
                                :value="item.orderClassNo"
                        />
                    </el-select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeCourseNo"
                            class="m-2"
                            placeholder="请选择课程"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in courseOptions"
                                :key="item.courseNo"
                                :label="item.courseName"
                                :value="item.courseNo"
                        />
                    </el-select>
                </div>
                <div class="block" style="margin-bottom: 20px; margin-left: 45px">
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeTeacherNo"
                            class="m-2"
                            placeholder="请选择教师"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in teacherOptions"
                                :key="item.teacherNo"
                                :label="item.teacherName"
                                :value="item.teacherNo"
                        />
                    </el-select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeRoomNo"
                            class="m-2"
                            placeholder="请选择教室"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in roomOptions"
                                :key="item.roomNo"
                                :label="item.roomName"
                                :value="item.roomNo"
                        />
                    </el-select>
                </div>
                <div class="block" style="margin-bottom: 20px;margin-left: 45px">
                    <el-time-picker
                            v-model="courseArrangeData.form.courseArrangeStartTime"
                            placeholder="请选择上课时间" style="width: 525px"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-time-picker
                            v-model="courseArrangeData.form.courseArrangeEndTime"
                            placeholder="请选择结班时间" style="width: 525px"/>
                </div>
                <el-form-item label="星期">
                    <el-input placeholder="请输入星期（星期一、星期二）"
                              v-model="courseArrangeData.form.courseArrangeWeekNumber"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学时">
                    <el-input placeholder="请输入学时（32、64）" v-model="courseArrangeData.form.courseArrangeClassHour"
                              autocomplete="off"
                              :maxlength="3"></el-input>
                </el-form-item>
                <el-form-item label="学分">
                    <el-input placeholder="请输入学分（4、16）" v-model="courseArrangeData.form.courseArrangeCredit"
                              autocomplete="off"
                              :maxlength="3"></el-input>
                </el-form-item>
                <el-form-item label="学期">
                    <el-input placeholder="请输入学期（第一学期）" v-model="courseArrangeData.form.courseArrangeSemester"
                              autocomplete="off"
                              :maxlength="4"></el-input>
                </el-form-item>
                <el-form-item label="周数">
                    <el-input placeholder="请输入周数（1-16周）" v-model="courseArrangeData.form.courseArrangeWeeks"
                              autocomplete="off"
                              :maxlength="5"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="courseArrangeData.form" label-width="100px" label-position="right"
                     style="padding-right: 30px;" v-if="isEdit === true">
                <div class="block" style="margin-bottom: 20px; margin-left: 45px">
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeOrderClassNo"
                            class="m-2"
                            placeholder="请选择班级"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in orderClassOptions"
                                :key="item.orderClassNo"
                                :label="item.orderClassName"
                                :value="item.orderClassNo"
                        />
                    </el-select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeCourseNo"
                            class="m-2"
                            placeholder="请选择课程"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in courseOptions"
                                :key="item.courseNo"
                                :label="item.courseName"
                                :value="item.courseNo"
                        />
                    </el-select>
                </div>
                <div class="block" style="margin-bottom: 20px; margin-left: 45px">
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeTeacherNo"
                            class="m-2"
                            placeholder="请选择教师"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in teacherOptions"
                                :key="item.teacherNo"
                                :label="item.teacherName"
                                :value="item.teacherNo"
                        />
                    </el-select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select
                            v-model="courseArrangeData.form.courseArrangeRoomNo"
                            class="m-2"
                            placeholder="请选择教室"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in roomOptions"
                                :key="item.roomNo"
                                :label="item.roomName"
                                :value="item.roomNo"
                        />
                    </el-select>
                </div>
                <div class="block" style="margin-bottom: 20px;margin-left: 45px">
                    <el-time-picker
                            v-model="courseArrangeData.form.courseArrangeStartTime"
                            placeholder="请选择上课时间" style="width: 525px"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-time-picker
                            v-model="courseArrangeData.form.courseArrangeEndTime"
                            placeholder="请选择结班时间" style="width: 525px"/>
                </div>
                <el-form-item label="星期">
                    <el-input placeholder="请输入星期（星期一、星期二）"
                              v-model="courseArrangeData.form.courseArrangeWeekNumber"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学时">
                    <el-input placeholder="请输入学时（32、64）" v-model="courseArrangeData.form.courseArrangeClassHour"
                              autocomplete="off"
                              :maxlength="3"></el-input>
                </el-form-item>
                <el-form-item label="学分">
                    <el-input placeholder="请输入学分（4、16）" v-model="courseArrangeData.form.courseArrangeCredit"
                              autocomplete="off"
                              :maxlength="3"></el-input>
                </el-form-item>
                <el-form-item label="学期">
                    <el-input placeholder="请输入学期（第一学期）" v-model="courseArrangeData.form.courseArrangeSemester"
                              autocomplete="off"
                              :maxlength="4"></el-input>
                </el-form-item>
                <el-form-item label="周数">
                    <el-input placeholder="请输入周数（1-16周）" v-model="courseArrangeData.form.courseArrangeWeeks"
                              autocomplete="off"
                              :maxlength="5"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="courseArrangeData.formVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitAddCourseArrange" v-if="isEdit === false">提交</el-button>
                    <el-button type="primary" @click="submitEditCourseArrange" v-if="isEdit === true">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>

</style>